<template>
    <div style="height: 100%;padding: 20px;">
        <div class="orderType">
            <div :class="orderType===0?'active_type':''" @click="changeOrder(0)">未完成订单{{ unfinishTotalCount }}</div>
            <div :class="orderType===1?'active_type':''" @click="changeOrder(1)">已完成订单{{ finishTotalCount }}</div>
        </div>
        <div class="orderlist_box">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="orderId" label="订单号" />
                <el-table-column prop="createTime" label="下单日期" />
                <el-table-column prop="goodsName" label="商品" />
                <el-table-column prop="number" label="数量" />
                <el-table-column prop="total" label="总价" />
                <el-table-column prop="status" label="订单状态" ></el-table-column>
                <el-table-column label="操作" >
                    <template #default>
                        <div>查看详情</div>
                        <div>删除订单</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { orderDataList } from '@/utils/api/order';

export default{
    data(){
        return{
            orderType:0,
            tableData:[],
            unfinishTotalCount:0,
            finishTotalCount:0
        }
    },
    computed:{
        user(){
            return JSON.parse(localStorage.getItem("user"))
        }
    },
    methods:{
        changeOrder(type){
            const that=this
            this.orderType=type
            orderDataList({userId:this.userId,status:this.orderType}).then(data=>{
                that.tableData=data.list
                console.log(data.list)
            })
        }
    },
    created(){
        const that=this
        orderDataList({userId:this.userId,status:0}).then(data=>{
            that.tableData=data.list
            that.unfinishTotalCount=data.totalCount
        })
        orderDataList({userId:this.userId,status:1}).then(data=>{
            that.finishTotalCount=data.totalCount
        })
    }
}
</script>

<style>
.orderType{
    display: flex;
    flex-direction: row;
}
.orderType div{
    margin: 0 20px;
    color: #bbb;
}
.active_type{
    color: black!important;
}
.orderlist_box{
    margin-top: 20px;
}
/* .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    background-color: black;
    color: #fff;
} */
</style>